<template>
  <div class="realtime-security-assessment">
    <div class="content-item-tittle">安全评估</div>
    <el-row style="margin-top: 20px;border: 1px solid #e1e1e1;">
      <el-col :span="24" style="height: 480px;">
        <div class="realtimeSecurity_left">
          <div style="position: relative;">
            <p class="item-content-tittle">实时安全评估</p>
            <div
              v-if="showhuan"
              class="ball-two"
              :class="
                score > 89.9
                  ? 'ball-three-blu'
                  : 80 > score
                  ? 'ball-three-red'
                  : 'ball-three-ye'
              "
            ></div>
            <div
              v-if="showhuan"
              class="ball-twotwo"
              :class="
                score > 89.9
                  ? 'ball-three-blu'
                  : 80 > score
                  ? 'ball-three-red'
                  : 'ball-three-ye'
              "
            ></div>
            <div
              v-if="showhuan"
              class="ball-three"
              :class="
                score > 89.9
                  ? 'ball-three-blu'
                  : 80 > score
                  ? 'ball-three-red'
                  : 'ball-three-ye'
              "
            ></div>
            <div ref="chart" class="mycanvas_viewstyle"></div>
            <span class="realtime_rightfamily iconfont icon-jurassic_safe"></span>

            <div class="canvas_content">
              <p class="canvas_content_score">{{ score }}</p>
              <p class="canvas_content_type">{{ score > 89.9 ? "安全" : 80 > score ? "告急" : "危险" }}</p>
              <div class="canvas_content_btn_div">
                <el-button
                  class="canvas_content_btn_btn"
                  size="mini"
                  plain
                  @click="getDetaileUnit()"
                >详情</el-button>
              </div>
            </div>
          </div>
          <div class="realtimeSecurity_left_list">
            <div class="declare_buttons">
              <div @click="assessmentStatement">
                <div></div>
                <span>评估申明</span>
              </div>
              <div @click="disclaimer = true">
                <div></div>
                <span>免责申明</span>
              </div>
            </div>
            <div class="real-time-score-list">
              <div class="list-header list-item">
                <span class="list-header-title">总分</span>
                <span class="list-header-value">100</span>
              </div>
              <div class="list-item" v-for="(item, i) in indicatorArr" :key="i">
                <span class="list-item-title">{{ item.name }}</span>
                <template>
                  <span v-if="item.value == 0" class="list-item-value color-3">✔</span>
                  <span v-else class="list-item-value color-1">
                    {{
                    "-" + item.value
                    }}
                  </span>
                </template>
              </div>
              <div class="list-item">
                <span class="list-item-title">剔除重复扣分</span>
                <span class="list-item-value color-3">
                  {{
                  deductUseScore == 0 ? 0 : "+" + deductUseScore
                  }}
                </span>
              </div>
              <div class="list-bottom list-item">
                <span class="list-item-title">得分</span>
                <span
                  class="list-item-value"
                  :class="{
                    'color-1': score < 80,
                    'color-2': score < 90 && score > 79.9,
                    'color-3': score > 89.9
                  }"
                >{{ score }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="24" style="height: 370px;">
        <div class="realtimeSecurity_right">
          <p class="item-content-tittle">最近24小时安全指数变化</p>
          <div id="historyScoreEchart" class="myechart_views"></div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      title="评估申明"
      width="600px"
      top="10vh"
      :visible.sync="dialogFireDrill"
    >
      <p style="font-size:16px;margin-bottom: 10px;">【评估依据】</p>
      <p>
        本评估依据中华人民共和国消防法（2019）、消防安全责任制实施办法、人员密集场所消防安全评估导则（ GA/T1369-2016）等法规，采用层次分析法，通过对监测数据进行整合、抽离、赋权进行评估。
        <br />
        <br />
      </p>
      <p style="font-size:16px;margin-bottom: 10px;">【评估方案】</p>
      <p>系统从消防设施单元、安全疏散设施单元、消防安全管理单元、建筑防火单元、客观情况以及直接判定项这6个维度对单位的消防安全状况进行实时评分。评分采用扣分制。总分上限为100。各单元扣分上限如下：</p>
      <div class="dialogFireDrill_data" v-for="(item,index) in dialogFireDrillData" :key="index">
        <p class="text-center">{{item.groupName}}</p>
        <p class="text-center">{{item.maxScore}}</p>
      </div>
      <div class="form-search-btn-box">
        <el-button
          class="form-search-btn is-round"
          type="primary"
          @click="dialogFireDrill = false"
        >确认</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="免责申明"
      width="600px"
      top="10vh"
      :visible.sync="disclaimer"
    >
      <p style="text-indent: 28px;">
        1、本评估虽按照相关法律法规指定，相对传统评估更具实时性优势，但仍然不能取代传统的线下人工评估。如不能
        监测到防火分区的完整性等。
        <br />
        <br />
      </p>
      <p style="text-indent: 28px;">2、单位不应该过度依赖于本评估，着眼于单位的现场、实时情况，按照相关法规要求进行严格管理是非常必要的。</p>
      <div class="form-search-btn-box">
        <el-button class="form-search-btn is-round" type="primary" @click="disclaimer = false">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getScoreItemDetail,
  getOrgHourScore,
  getSafetyGroupMaxScore,
} from '@/api/home'
import { getSafeEvaluateHistoryTrend } from '@/api/safeEvaluate'
import utils from '@/utils/util'

export default {
  name: 'RealtimeSecurityAssessment',
  props: {
    organizationId: {
      default() {
        return undefined
      },
    },
  },
  data() {
    return {
      showhuan: false,
      score: 0, // 分数
      deductUseScore: 0, //剔除重复扣分
      indicatorArr: [], // 扣分项数组
      backgroundColor: '#47CFAD',
      utils: utils,
      dialogFireDrill: false,
      disclaimer: false,
      dialogFireDrillData: [], // 评估申明数据
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 更新/刷新模块
    refreshModel() {
      this.getData()
    },
    getDetaileUnit() {
      let that = this
      this.$parent.getHomeSingFlag(true)
    },
    getData() {
      let that = this
      getScoreItemDetail({
        orgId: this.organizationId || this.$store.state.userinfo.org.id || '',
      }).then((res) => {
        if (res.status === 200) {
          that.score = res.data.score
          if (that.score < 80) {
            that.backgroundColor = '#FD5E5E'
          } else if (that.score > 79.9 && that.score < 90) {
            that.backgroundColor = '#FFB32D'
          } else if (that.score > 89.9) {
            that.backgroundColor = '#47CFAD'
          }
          this.initEcharts()
          that.deductUseScore = res.data.deductUseScore
          that.initSafeAssessEchart(res.data)
        }
      })
      getOrgHourScore({
        orgId: this.organizationId || this.$store.state.userinfo.org.id || '',
      }).then((res) => {
        if (res.status === 200) {
          // res.data = [70,80,90,98,98,95,85,80].map((n,i)=>{
          // 	return {
          // 		score:n,
          // 		createTime:`2021-01-28 0${i}:00:00`
          // 	}
          // })
          that.initHistoryLineEchart(res.data)
        }
      })
    },
    resultMap(val) {
      let text = ''
      if (val === 1) {
        text = '安全'
      } else if (val === 3) {
        text = '告急'
      } else {
        text = '危险'
      }

      return text
    },
    // 评估声明
    assessmentStatement() {
      let _this = this
      getSafetyGroupMaxScore({
        orgId: _this.organizationId || _this.$store.state.userinfo.org.id || '',
      }).then((res) => {
        if (res.status === 200) {
          _this.dialogFireDrillData = res.data
        }
      })
      _this.dialogFireDrill = true
    },
    // 解析扣分list数据
    initSafeAssessEchart(data) {
      let that = this
      let _formatterhtml = ''
      that.indicatorArr = []
      for (let key in data) {
        if (['1', '2', '3', '4', '5', '6'].indexOf(key) > -1) {
          let _obj = data[key]
          let _score =
            (_obj.value ? parseFloat(_obj.value) : 0) > 100
              ? 0
              : 100 - (_obj.value ? parseFloat(_obj.value) : 0)
          that.indicatorArr.push({
            name: _obj.groupName,
            max: _obj.maxScore,
            min: 0,
            value: _obj.value,
            groupId: _obj.groupId,
            groupIco: _obj.groupIco,
          })
          _formatterhtml +=
            _obj.groupName +
            '：' +
            (+_obj.value == 0 ? '' : '-') +
            _obj.value +
            '<br/>'
        }
      }
    },
    // 六边形
    initEcharts() {
      // 基于准备好的dom，初始化echarts实例
      let that = this
      that.showhuan = true
      let bar_dv = this.$refs.chart
      if (bar_dv) {
        let myChart = this.$echarts.init(bar_dv)
        myChart.setOption({
          radar: [
            {
              indicator: [
                { text: '', max: 0 },
                { text: '', max: 0 },
                { text: '', max: 0 },
                { text: '', max: 0 },
                { text: '', max: 0 },
                { text: '', max: 0 },
              ],
              center: ['50%', '50%'],
              radius: 160,
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              splitArea: {
                show: false,
              },
            },
          ],
          series: [
            {
              lineStyle: {
                width: 3,
                opacity: 0.5,
                color: that.backgroundColor,
              },
              areaStyle: {
                normal: {
                  opacity: 1,
                  color: that.backgroundColor,
                },
              },
              symbolSize: 0,
              type: 'radar',
              data: [
                {
                  value: [0, 0, 0, 0, 0, 0],
                },
              ],
            },
          ],
        })
      }
    },
    // 时间戳划为年月日时分秒
    timeFormat(timestamp) {
      var time = new Date(timestamp)
      var year = time.getFullYear()
      var month = time.getMonth() + 1
      var date = time.getDate()
      var hours = time.getHours()
      var minutes = time.getMinutes()
      var seconds = time.getSeconds()
      return (
        year +
        '-' +
        this.addZero(month) +
        '-' +
        this.addZero(date) +
        ' ' +
        this.addZero(hours) +
        ':' +
        this.addZero(minutes) +
        ':' +
        this.addZero(seconds)
      )
    },
    addZero(num) {
      return num < 10 ? '0' + num : num
    },
    compare(property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    initHistoryLineEchart(data) {
      let that = this
      let pieces = [] // 每段折线颜色设置
      let value = []
      let xList = []
      let arr = data.sort(that.compare('createTime'))
      let markArea = []
      if (
        new Date(arr[arr.length - 1].createTime).getTime() <
        new Date().getTime()
      ) {
        data.push({
          createTime: that.timeFormat(new Date().getTime()),
          score: arr[arr.length - 1].score,
          status: arr[arr.length - 1].status,
        })
      }
      if (
        new Date(arr[0].createTime).getTime() >
        new Date().getTime() - 24 * 60 * 60 * 1000
      ) {
        data.unshift({
          createTime: that.timeFormat(
            new Date().getTime() - 24 * 60 * 60 * 1000
          ),
          score: arr[0].score,
          status: arr[0].status,
        })
      }
      // data = data.sort(that.compare('createTime'))
      // 生成x轴数据和data数据
      for (let i = 0, len = data.length; i < len; i++) {
        let itemColor = this.getColorByScore(data[i].score)
        value.push([data[i].createTime, data[i].score])
        xList.push(data[i].createTime)
        pieces.push({
          gt: i,
          lt: i + 1,
          color: itemColor,
        })
        if (i < data.length - 1) {
          markArea.push([
            {
              xAxis: data[i].createTime,
              itemStyle: {
                color: itemColor,
              },
            },
            {
              xAxis: data[i + 1].createTime,
              itemStyle: {
                color: this.getColorByScore(data[i + 1].score),
              },
            },
          ])
        }
      }

      let option = {
        title: {
          text: '近24小时评估结果图',
          textStyle: {
            fontSize: '160%',
            color: '#FFF',
          },
        },
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            let str = `${
              params[0].value[0]
            }<br/><span style="display: inline-block; margin-right: 0.5rem; border-radius: 1rem; width:1rem; height:1rem; vertical-align: middle; background-color:${this.getColorByScore(
              params[0].value[1]
            )};"></span>${params[0].seriesName}：${params[0].value[1]}`

            return str
          },
        },
        grid: {
          top: '15%',
          left: '3%',
          right: '3.5%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: {
          type: 'time',
          // data: xList,
          show: true,
          boundaryGap: false,
          axisTick: {
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#d2d2d2',
            },
          },
          axisLabel: {
            show: true,
            formatter: function (value, index) {
              const time = utils.ilinkTimeformat.format(
                new Date(value),
                'MM-dd hh:mm:ss'
              )
              return time
            },
            color: '#999999',
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
            },
          },
        },
        yAxis: {
          type: 'value',
          max: 100,
          splitNumber: 5,
          // boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
            },
          },
          axisLabel: {
            color: '#8890ab',
            fontSize: '120%',
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,.1)',
            },
          },
          // data: ["", "告急", "危险", "安全"],
        },
        visualMap: [
          {
            type: 'piecewise',
            show: false,
            dimension: 1,
            pieces: [
              {
                lt: 80,
                color: '#FD5E5E',
              },
              {
                gte: 80,
                lt: 90,
                color: '#FFB32D',
              },
              {
                gte: 90,
                lte: 100,
                color: '#47CFAD',
              },
            ],
          },
        ],
        series: [
          {
            name: '安全评估结果',
            type: 'line',
            step: 'end',
            showSymbol: false,
            lineStyle: {
              width: 3, //折线宽度
            },
            data: value,
            // markArea: {
            // 	itemStyle: {
            // 		opacity:0.1
            // 	},
            // 	data: markArea
            // }
          },
        ],
      }

      this.$echarts
        .init(document.getElementById('historyScoreEchart'))
        .setOption(option)
    },
    getColorByScore(val) {
      if (val > 89.9) {
        return '#47CFAD'
      } else if (val > 79.9) {
        return '#FFB32D'
      } else {
        return '#FD5E5E'
      }
    },
  },
  mounted() {},
}
</script>
<style lang="scss">
.realtime-security-assessment {
  height: 905px;
  .form-search-btn-box {
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
    .form-search-btn {
      margin: 20px 0;
    }
  }
  .dialogFireDrill_data {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
    p {
      flex: 1;
      label {
        float: left;
        content: '';
        display: table;
        width: 6px;
        height: 6px;
        background: #606266;
        border-radius: 50%;
        margin-top: 7px;
        margin-right: 10px;
      }
    }
  }
  .el-col-16 {
    width: 66%;
  }
  .cart-top-title {
    padding: 52px 0 0 30px;
    font-size: 20px;
    font-weight: 400;
    color: #8890ab;
  }
  .realtimeSecurity_left {
    position: relative;
    display: flex;
    height: 100%;
    .realtime_rightfamily {
      position: absolute;
      top: 32%;
      left: 50%;
      margin-left: -120px;
      font-size: 240px;
      color: rgba(0, 0, 0, 0.07);
    }
    .mycanvas_viewstyle {
      width: 600px;
      height: calc(100% - 61px);
    }
    // 小环
    .ball-three {
      position: absolute;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: auto;
      box-sizing: content-box;
      z-index: 0;
    }
    .ball-three {
      -webkit-animation: light-wave1 2s 1.9s ease-out infinite;
      animation: light-wave1 2s 1.9s ease-out infinite;
    }
    // 小环
    .ball-twotwo {
      position: absolute;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: auto;
      box-sizing: content-box;
      z-index: 0;
    }
    .ball-twotwo {
      -webkit-animation: light-wave3 2s 1.6s ease-out infinite;
      animation: light-wave3 2s 1.6s ease-out infinite;
    }
    // 大环
    .ball-two {
      position: absolute;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: auto;
      box-sizing: content-box;
      z-index: 0;
    }
    .ball-two {
      -webkit-animation: light-wave2 2s 1.3s ease-out infinite;
      animation: light-wave2 2s 1.3s ease-out infinite;
    }
    .ball-three-blu {
      background-image: url(../../../assets/images/home/six_blu.png);
    }
    .ball-three-ye {
      background-image: url(../../../assets/images/home/six_ye.png);
    }
    .ball-three-red {
      background-image: url(../../../assets/images/home/six_red.png);
    }
    .canvas_content {
      position: absolute;
      top: 36%;
      left: 50%;
      margin-left: -100px;
      width: 200px;
      display: grid;
      justify-content: center;
      align-items: center;
      text-align: center;
      .canvas_content_score {
        color: #ffffff;
        font-size: 82px;
        font-weight: 600;
      }
      .canvas_content_type {
        font-size: 26px;
        font-weight: 400;
        color: #ffffff;
        margin-top: -7px;
      }
      .canvas_content_btn_div {
        margin-top: 20px;
        .canvas_content_btn_btn {
          border: 1px solid #ffffff;
          color: #ffffff;
          background-color: rgba(0, 0, 0, 0);
          height: 26px;
          line-height: 0;
        }
      }
    }
    .realtimeSecurity_left_list {
      padding: 0px 20px 0 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: top;
      font-size: 16px;
      color: #2f3444;
      .declare_buttons {
        display: inline-flex;
        justify-content: flex-end;
        margin-right: 20px;
        margin-top: -15px;
        font-size: 20px;
        margin-bottom: 20px;
        div:nth-child(1) {
          margin-left: 20px;
          color: #8890ab;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          div {
            width: 18px;
            height: 20px;
            margin-top: 2px;
            margin-right: 4px;
            background: url(../../../assets/images/home/disclaimer.png);
            background-size: 18px 20px;
          }
        }
        div:nth-child(2) {
          margin-left: 20px;
          color: #8890ab;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          div {
            width: 20px;
            height: 20px;
            margin-top: 2px;
            margin-right: 4px;
            background: url(../../../assets/images/home/dialogFireDrill.png);
            background-size: 20px 20px;
          }
        }
        div:hover {
          color: #446bde;
        }
        div:nth-child(1):hover {
          div {
            width: 18px;
            height: 20px;
            margin-top: 2px;
            margin-right: 4px;
            background: url(../../../assets/images/home/disclaimer-on.png);
            background-size: 18px 20px;
          }
        }
        div:nth-child(2):hover {
          div {
            width: 20px;
            height: 20px;
            margin-top: 2px;
            margin-right: 4px;
            background: url(../../../assets/images/home/dialogFireDrill-on.png);
            background-size: 20px 20px;
          }
        }
      }
      // padding-top: 50px;
      .real-time-score-list {
        margin-left: 20px;
        width: calc(100% - 40px);
        max-height: 100%;
        .list-item {
          display: flex;
          justify-content: space-between;
          padding: 0 15px;
          width: 100%;
          height: 40px;
          line-height: 40px;
          border-bottom: 1px solid rgba(179, 187, 216, 0.2);
          &:last-child {
            border-bottom: none;
          }
        }
        .list-header,
        .list-bottom {
          font-size: 20px;
          color: #8890ab;
          .list-header-value {
            color: #000;
          }
        }
      }
    }
  }
  .realtimeSecurity_right {
    float: left;
    width: 100%;
    height: 100%;
    .myechart_views {
      width: 100%;
      height: calc(100% - 61px);
    }
  }
}
</style>
